<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script>
		function loadXMLDoc() {
			// 1. 创建 XMLHttpRequest对象
			var xmlhttp = new XMLHttpRequest();

			// 2. 创建请求方式和地址
			xmlhttp.open("GET", "https://so.csdn.net/api/v2/search?q=王力宏&t=userinfo", true);
			// 3. 发送请求
			// xmlhttp.open("GET", "http://localhost:5000/students", true);
			xmlhttp.send();

			// 4. 监听结果返回
			xmlhttp.onreadystatechange = function () {
				console.log("xmlhttp.readyState: ", xmlhttp.readyState);
				// console.log("xmlhttp.responseText: ", xmlhttp.responseText);
				// 0: 请求未初始化； 1: 服务器连接已建立； 2: 请求已接收；3: 请求处理中； 4: 请求已完成，且响应已就绪
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					// 5. 处理数据
					document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
				}
			}
		}
	</script>
</head>

<body>

	<h2>使用 AJAX 修改该文本内容</h2>
	<pre>
		原生ajax非常麻烦：
		1.创建一个XMLHttpRequest异步对象
		2.设置请求方式和请求地址
		3.接着，用send发送请求
		4.监听状态变化
		5.最后，接收返回的数据
	</pre>
	<button type="button" onclick="loadXMLDoc()">加载内容</button>
	<div id="myDiv">数据返回区域</div>

</body>

</html>